<template>
    <div class="loadd">
        <img src="/src/assets/img/conn++.gif" alt="" width="100">
        
    </div>
    <!-- <hr>
    <div class="loadd">
        <button @click="uart_send_test">发送数据</button>
        <button @click="uart_read_test"> 读取一次串口</button>
    </div> -->
    
</template>

<script setup>
    import { useRouter } from 'vue-router';
    import { inject,watch,ref } from 'vue';
    import {invoke} from '@tauri-apps/api/core'
    

    const serve_addr = inject('serve_addr')
    const uart_port  = inject('uart_port')
    const map_addr   = inject('map_app')
    const router     = useRouter()
    const robots_cfg_ip  = ref([''])

    async function read_cfg() {
        const ret = await invoke("read_cfg_data");
        const data = await JSON.parse(ret)
        if(data && data.robots){
            //serve_addr.value = data.robots[0]    
            robots_cfg_ip.value = data.robots
        }
        if(data && data.uart_port){
            uart_port.value = data.uart_port
        }
        if(data && data.map_addr){
            map_addr.value = data.map_addr
        }
    }

    watch(robots_cfg_ip,(dd2,dd1)=>{
        console.log("Data changed....",dd2)
        test_conn_robot()
    })

    async function test_conn_robot() {
        for(let x=0; x < robots_cfg_ip.value.length; x++){
            const ws = new WebSocket('ws://' + robots_cfg_ip.value[x] + ':10088/conn_test/')
            ws.onmessage = (evt) => {
                route_robot(evt.data,x)

                setTimeout(()=>{
                    ws.close()
                },500)

            }
            ws.onopen = (evt) => { }
        }
    }

    function route_robot(msg,idx){
        serve_addr.value = robots_cfg_ip.value[idx]
        if(msg.match('rov')){
            router.push('/rov') //跳转到具体某类机器人页面
        }
    }

    setTimeout(() => {
        read_cfg()
        //test_uart_comm()
        //route_robot('---rov---',0)

    }, 700);
</script>

<style scoped>
.loadd{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
}
</style>